﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/main.css" rel="stylesheet">
    <script src="assets/js/jquery-1.7.2.min.js"></script>
    <script src="assets/js/jquery.tmpl.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script>
        var resources = [];
        var server = "http://localhost";
    </script>
</head>
<body>

    <div id="resources_container">
        <ul id="resources">
        </ul>
    </div>

    <script id="doc_tmp_resource" type="text/x-jquery-tmpl">

        <li id="resource_${name}" class="resource">

            <div class="heading">
                <h2>
                    <a href="#" onclick="Docs.toggleEndpointListForResource('${name}');">/${name}</a>
                </h2>
            </div>

            <ul id="endpoint_list_${name}" class="endpoints">
                {{each operations}}     
                    <li class="operation ${http_method}">
                        <div class="heading" onclick="Docs.toggleContent('${notes}');">
                            <h3>
                                <span class="http_method">${http_method}</span>
                                <span class="path">${path}</span>
                                <span class="name">${notes}</span>
                            </h3>
                        </div>
                        <div class="content" id="content_${notes}">
                            <h3>Description </h3>
                            <div class="response_content">
                                {{html description}}
                            </div>
                            <h3>Request </h3>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <td class="request-th">url</td>
                                        <td>${path}</td>
                                    </tr>
                                    <tr>
                                        <td class="request-th">格式</td>
                                        <td>${format}</td>
                                    </tr>
                                    <tr>
                                        <td class="request-th">http请求方式</td>
                                        <td>${http_method}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <h3>Parameters </h3>
                            <form method="${http_method}">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="parameter-parameter">parameter</th>
                                        <th class="parameter-value">value</th>
                                        <th class="parameter-description">description</th>
                                        <th class="parameter-datatype">data type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{each parameters}}     
                                    <tr>
                                        <td class="parameter-parameter">${parameter}</td>
                                        <td class="parameter-value"><input name="${parameter}" type="text" value="${value}" /></td>
                                        <td class="parameter-description">${description}</td>
                                        <td class="parameter-datatype">${data_type}</td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                            <input type="button" class="btn" value="test api" onclick="Docs.TestApi(this,'${$index}', '${path}')" />
                            </form>
                            <h3>Response </h3>
                            <div class="response_content">
                                {{html response.data}}
                            </div>
                            <h5>description</h5>
                            <div class="response_description">
                                {{html response.description}}
                            </div>

                            <h3>Return Code </h3>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="returncode-errcode">errcode</th>
                                        <th class="returncode-msg">msg</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{each return_code}}     
                                    <tr>
                                        <td class="returncode-errcode">${errcode}</td>
                                        <td class="returncode-msg">${msg}</td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    </li>
                {{/each}}      
            </ul>
        </li>

    </script>
    <script src="api/user.js" type="text/javascript"></script>
    <script src="api/lbs.js" type="text/javascript"></script>
    <script type="text/javascript">

        var Docs = {};
        Docs.toggleEndpointListForResource = function (name) {
            $("#endpoint_list_" + name).slideToggle();
        }

        Docs.toggleContent = function (name) {
            $("#content_" + name).slideToggle();
        }

        Docs.TestApi = function (obj,index, path) {
            $(obj).parent("form").attr("action", server + path);
            $(obj).parent("form").attr("target", "_blank");
            $(obj).parent("form").submit();
        }
        Docs.init = function () {
            $("#doc_tmp_resource").tmpl(resources).appendTo("#resources");
        }
        Docs.init();
    </script>
</body>
</html>
